<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		#box{
			width: 100px;
			height: 100px;
			background: blanchedalmond;
		}
			#pox{
				width: 250px;
				height: 250px;
				background: orange;
				display: block;
			}
			#menu{
				width: 50px;
				width: 100px;
				background: lightgoldenrodyellow;
				position: absolute;
				display: none;
			}
		</style>
	</head>
	<body>
		<span>事件对象的其他补充</span>
		<div>在w3c 提供了一个属性：relatedTarget ;这个属性可以在mouseover和mouseout事件中获取从那里移入和从那里移除的DOM对象
		<br />
		IE提供了两组分别用于移入移出的属性：fromElement和toElement,分别对应mouseover和mouseout
		</div>
		
	<span id="pox">
		
		<div id="box"  style="border: 1px solid rosybrown;">
			测试区域
		</div>
		
	</span>
	<a href="https://www.baidu.com/">百度(已经取消默认事件)</a>
	<a href="https://www.baidu.com/">百度一下</a>
	<br />
	<textarea id='text' style="width: 300px;height: 300px;">
           右击文本域禁用默认事件,弹出自己的菜单样式
		
	</textarea>
	<ul id='menu'>
	 	<li>菜单1</li>
	 	<li>菜单2</li>
	 	<li>菜单3</li>
	</ul>
	</body>
	
	<script>
		//兼容ie的处理事件
		
		//添加事件
		function addEvent(obj,type,fn){
			if(obj.addEventListener){
				obj.addEventListener(type,fn,false);
			}else if(obj.attachEvent){
				obj.attachEvent('on'+type,fn);
			}
		}
		//移除事件
		function removeEvent(obj,type,fn){
			if(obj.removeEventListener){
				obj.removeEventListener(type,fn,false);
			}else if(obj.detachEvent){
				obj.detachEvent('on'+type,fn);
			}
		}	
		
		
			//调用
		addEvent(window,'load',function(){
			var box = document.getElementById('box');
		/*	//w3c
			addEvent(box,'mouseover',function(eve){
				alert(eve.relatedTarget);//得到鼠标移入box后最近的dom对象（即从谁移入的）
			});
			addEvent(box,'mouseout',function(eve){//从box移出的最近的那个对象(移入到谁)
				alert(eve.relatedTarget);
			});
			//ie
			addEvent(box,'mousover',function(){
				alert(window.event.fromElement.tagName);//从那里移入
			});
				addEvent(box,'mousout',function(){
				alert(window.event.toElement.tagName);//移出到哪
			});
			*/
			
		/*	//跨浏览器兼容
			addEvent(box,'mouseover',function(eve){
				alert(getTarget(eve));
			});
			addEvent(box,'mouseout',function(eve){
				alert(getTarget(eve));
			});*/
		});
		
		
		//兼容浏览器处理
		function getTarget(eve){
			var e =eve = window.event;
			if(e.srcElement){//ie
				if(e.type=='mouseover'){
					return e.fromElement.tagName;
				}else if(e.type=='mouseout'){
					return e.toElement.tagName;
				}
			}else if(e.relatedTarget){//w3c
				return e.relatedTarget;
			}
		}
		
		
		//阻止默认事件行为
		addEvent(window,'load', function(){
			var link = document.getElementsByTagName("a")[0];
			//alert(link)
//			link.onclick =function(){
//				return false; //太死板
//			}
			
			addEvent(link,'click',function(eve){
				//w3c
			// eve.preventDefault();			    //可以放在任意代码位置
			preDef(eve);//
			
			});
		});
		
		//跨浏览器兼容阻止默认事件
		function preDef(eve){
			var e =eve||window.event;
			if(e.preventDefault){
				e.preventDefault();  //w3c
			}else{
				e.returnValue = false;//IE
				//e.returnValue ='你确定要离开吗';
			}
			
		}
		
		
		//上下文菜单事件：contextmennu ，当我们右击网页的时候，会自动出现window自带的菜单。
		//那么我们可以使用contextmenu事件来修改指定的菜单，但前提是把右击的默认行为取消掉
		
		addEvent(window,'load',function(){
			var text = document.getElementById("text");
			addEvent(text,'contextmenu',function(eve){
				preDef(eve);//禁用默认事件（右击菜单事件）
				var menu = document.getElementById('menu');
				var e =eve||window.event;
				menu.style.left = e.clientX+'px';
				menu.style.top = e.clientY+'px';
				menu.style.display ='block';//显示
				
				//单击隐藏
				addEvent(document,'click',function(){
					menu.style.display = 'none';
				});
				
			});
		});
		
		
		
		//卸载前事件beforeunload这个事件可以帮助在离开本页的时候给出相应的提示，'离开'或者'返回'操作。
		addEvent(window,'beforeunload',function(eve){//没用
			preDef(eve);
		});
		
		
		
		//鼠标滚轮（mousewheel非火狐）和（DOMMouseScroll火狐），用于获取鼠标上下滚轮的距离。
		
		addEvent(document,'mousewheel',function(){
			var e =eve||window.event;//ie和非ie
			alert(e.wheelData);//120
			//alert(WD(eve)); //调用
		});
		addEvent(document,'DOMMouseScroll',function(){
			alert(e.wheelData);//-4 返回的数值不同
		});
		
		//浏览器兼容（应该再做一个火狐和非火狐兼容方法）
		function WD(eve){
			var e =eve||window.event;
			if(e.wheelData){
				return e.wheelData;
			}else if(eve.detail){
				return -eve.detail*30;   //使返回值相同
			}
		}
		
		
		//DOM加载事件   DOMContentLoaded 和 readystatechange 
</script>
</html>
